<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableData="tableData"
        :expandObj="expandObj"
        :tableColumn="tableColumn"
        :total="totalNum"
        requestName="searchHandle"
        @rowView="operateHandle($event)"
      />
    </div>
    <TrDetail
      v-model="isShowDetailPopup"
      :leftList="detailList"
      statusModel="hidden"
      :detailData="detailData"
      :width="1227"
      :labelWidth="102"
      :isNeedFooter="false"
      @confrim="activeName = 'first'"
    >
      <template #bomTable>
        <el-tabs v-model="activeName" class="mg-tp--8">
          <el-tab-pane label="工单BOM" name="first">
            <TrTable
              v-if="activeName == 'first'"
              isPopup
              isNeedIndex
              v-model="bomSearchParams"
              :tableData="bomTableData"
              :total="bomTotal"
              :tableColumn="bomTableColumn"
              requestName="getBomListHandle"
            />
          </el-tab-pane>
          <el-tab-pane label="工单日志" name="second">
            <TrTable
              v-if="activeName == 'second'"
              isPopup
              isNeedIndex
              v-model="logSearchParams"
              :total="logTotal"
              :tableData="logTableData"
              :tableColumn="logTableColumn"
              requestName="getLogListHandle"
            />
          </el-tab-pane>
        </el-tabs>
      </template>
    </TrDetail>
  </div>
</template>

<script>
import {
  getOrderList,
  getBomList,
  getLogList,
} from "@/api/production/workOrderManage";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";
export default {
  name: "textBox",
  components: {
    TrTable,
    TrDetail,
  },
  data: () => ({
    isShowUpload: true,
    bomSearchParams: {
      current: 1,
      size: 10,
      workOrderId: "",
    },
    bomTotal: 0,
    bomTableColumn: [
      {
        type: "text",
        label: "原料料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "物料名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "物料规格",
        value: "materialSpec",
      },
      {
        type: "text",
        label: "需求数量",
        value: "requireNum",
      },
      {
        type: "text",
        label: "需求重量",
        value: "requireWeight",
      },

      {
        type: "text",
        label: "数量单位",
        value: "requireNumUnitCode",
      },
      {
        type: "text",
        label: "重量单位",
        value: "requireWeightUnitCode",
      },
    ],
    bomTableData: [],
    logSearchParams: {
      current: 1,
      size: 10,
      workOrderId: "",
    },
    logTotal: 0,
    logTableColumn: [
      {
        type: "text",
        label: "变更时间",
        value: "changeTime",
      },
      {
        type: "text",
        label: "变更人员",
        value: "changeErpName",
      },
      {
        type: "text",
        label: "变更内容描述",
        value: "changeContent",
      },
    ],
    logTableData: [],
    activeName: "first",
    isShowDetailPopup: false,
    detailList: [
      {
        type: "text",
        id: 1,
        label: "基础信息",
        list: [
          {
            text: "工单号",
            id: "workOrderCode",
            width: 33.33,
          },
          {
            text: "工艺路线",
            id: "flowName",
            width: 33.33,
          },
          {
            text: "成品料号",
            id: "materialCode",
            width: 33.33,
          },
          {
            text: "成品名称",
            id: "materialName",
            width: 33.33,
          },
          {
            text: "计划数量",
            id: "planNum",
            width: 33.33,
          },
          {
            text: "已完工数量",
            id: "completeNum",
            width: 33.33,
          },
          {
            text: "计划开工日期",
            id: "planStartTime",
            width: 33.33,
          },
          {
            text: "生产车间",
            id: "productionWorkShop",
            width: 33.33,
          },
          {
            text: "工单状态",
            id: "statusName",
            width: 33.33,
          },
          {
            text: "实际开工日期",
            id: "actualStartTime",
            width: 33.33,
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "操作信息",
      },
    ],
    detailData: {},
    totalNum: 0,
    tableData: [
      {
        id: 1,
        workOrderCode: "materialCode",
        workOrderTypeName: "materialName",
        flowName: "materialSpec",
        expandChildren: [
          {
            id: 2,
            workOrderCode: "materialCode1",
            workOrderTypeName: "materialName2",
            flowName: "materialSpec3",
          },
        ],
      },
    ],
    searchParams: {
      current: 1,
      size: 10,
      workOrderCode: "",
      materialCode: "",
      materialName: "",
      state: "",
    },
    searchShowList: [
      {
        label: "工单号",
        type: "input",
        width: 33,
        value: "",
        id: "workOrderCode",
      },
      {
        label: "成品料号",
        type: "input",
        width: 33,
        value: "",
        id: "materialCode",
      },
      {
        label: "成品名称",
        type: "input",
        width: 33,
        value: "",
        id: "materialName",
      },
    ],
    searchHideList: [
      {
        label: "工单状态",
        type: "select",
        width: 33,
        value: "",
        list: [],
        id: "state",
      },
    ],
    tableColumn: [
      {
        columnType: "expand",
        width: 60,
      },
      {
        type: "text",
        label: "工单号",
        value: "workOrderCode",
      },
      {
        type: "text",
        label: "单据类型",
        value: "workOrderTypeName",
      },
      {
        type: "text",
        label: "工艺路线",
        value: "flowName",
      },
      // {
      //   type: "text",
      //   label: "工单状态",
      //   value: "statusName",
      // },
      // {
      //   type: "text",
      //   label: "成品料号",
      //   value: "materialCode",
      // },
      // {
      //   type: "text",
      //   label: "成品名称",
      //   value: "materialName",
      // },
      // {
      //   type: "text",
      //   label: "计划数量",
      //   value: "planNum",
      // },
      // {
      //   type: "text",
      //   label: "已完工数量",
      //   value: "completeNum",
      // },
      // {
      //   type: "text",
      //   label: "合格数量",
      //   value: "quantityNum",
      // },
      // {
      //   type: "text",
      //   label: "报废数量",
      //   value: "scrapNum",
      // },
      // {
      //   type: "text",
      //   label: "单位",
      //   value: "unitCode",
      // },
      // {
      //   type: "text",
      //   label: "计划开工日期",
      //   value: "planStartTime",
      // },
      // {
      //   type: "text",
      //   label: "计划完工日期",
      //   value: "planEndTime",
      // },
      // {
      //   type: "text",
      //   label: "实际开工日期",
      //   value: "actualStartTime",
      // },
      // {
      //   type: "text",
      //   label: "实际完工日期",
      //   value: "actualEndTime",
      // },
      // {
      //   type: "text",
      //   label: "生产车间",
      //   value: "productionWorkShop",
      // },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 80,
        showBtnList: [
          {
            label: "查看",
            option: "rowView",
          },
        ],
      },
    ],
    expandObj: {
      tableColumn: [
        {
          type: "text",
          label: "工单号",
          value: "workOrderCode",
          fixed: "left",
        },
        {
          type: "text",
          label: "单据类型",
          value: "workOrderTypeName",
        },
        {
          type: "text",
          label: "工艺路线",
          value: "flowName",
        },
      ],
    },
  }),
  methods: {
    getBomListHandle() {
      getBomList(this.bomSearchParams).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.bomTotal = data.total;
        this.bomTableData = data.records;
      });
    },
    getLogListHandle() {
      getLogList(this.logSearchParams).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.logTotal = data.total;
        this.logTableData = data.records;
      });
    },
    async operateHandle(val) {
      this.detailData = val;
      const col = this.$findByProperty(
        this.detailList,
        "id",
        "statusName",
        "list"
      );
      col.valueColor =
        {
          10: "#ED7B2F",
          20: "#2F7AED",
          30: "#00A870",
          40: "#A6A6A6",
        }[val.state] || "";
      this.bomSearchParams.workOrderId = val.id;
      this.logSearchParams.workOrderId = val.id;
      let bomRes = await getBomList(this.bomSearchParams);
      let logRes = await getLogList(this.logSearchParams);
      if (bomRes.data.code !== 200) return;
      if (logRes.data.code !== 200) return;
      let bomData = bomRes.data.data;
      let logData = logRes.data.data;
      this.$validateData(bomData);
      this.$validateData(logData);
      this.bomTableData = bomData.records;
      this.bomTotal = bomData.total;
      this.logTableData = logData.records;
      this.logTotal = logData.total;
      this.isShowDetailPopup = true;
    },
    getListHandle(params) {
      getOrderList(params).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.totalNum = data.total;
        this.tableData = data.records;
        this.tableData.forEach((item) => {
          item["statusNameColor"] =
            {
              10: "#ED7B2F",
              20: "#2F7AED",
              30: "#00A870",
              40: "#A6A6A6",
            }[item.state] || "";
        });
      });
    },
    searchHandle() {
      this.getListHandle(this.searchParams);
    },
    async initHandle() {
      const res = await this.$fetchEnumApi("mes-production-service", [
        "workOrderStatus",
      ]);
      const hCol = this.$findByProperty(this.searchHideList, "id", "state");
      this.$set(hCol, "list", res["workOrderStatus"]);
    },
  },
  created() {
    // let code = this.$route.query.workOrderCode;
    // if (code) {
    //   this.searchShowList[0].value = code;
    //   this.searchParams.workOrderCode = code;
    // }
    // this.initHandle();
    // this.searchHandle();
  },
};
</script>

<style></style>
